<template>
  <div class="channel-edit">
    <!-- 用户频道 -->
    <div class="channel">
      <van-cell title="我的频道" :border="false">
        <van-button
          plain
          size="mini"
          type="danger"
          @click="isEdit = !isEdit"
        >{{ isEdit ? '取消' : '编辑' }}</van-button>
      </van-cell>
      <van-grid>
        <van-grid-item
          v-for="(item,index) in channels"
          :key="item.id"
          :class="{current: index === active}"
          @click="$emit('toggleActive', index)"
        >
          <span>{{ item.name }}</span>
          <van-icon
            v-if="isEdit && item.id !== 0"
            name="cross"
            class="btn"
            @click.stop="delChannel(item.id, index)"
          />
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 可选频道 -->
    <div class="channel">
      <van-cell title="可选频道" :border="false" />
      <van-grid>
        <van-grid-item
          v-for="item in optionalChannels"
          :key="item.id"
          @click="addChannel(item)"
        >
          <span>{{ item.name }}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import { reqUpdateChannels } from '@/api/channels'
export default {
  name: 'ChannelEdit',
  props: {
    active: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      isEdit: false // 控制删除频道按钮x布尔值
    }
  },
  computed: {
    ...mapState('channels', ['channels']),
    ...mapGetters('channels', ['optionalChannels'])
  },
  methods: {
    addChannel(channel) {
      // console.log(channel)
      // 提交一个mutation 处理视图
      this.$store.commit('channels/addChannel', channel)
      // channels数据 [{id:xx,name:xx}]
      // 发送请求 要求的数据格式 是 [{id:xxx, seq}]
      /* console.log(this.channels)
      const arr = this.channels.map((item, index) => {
        return { id: item.id, seq: index }
      })
      // console.log(arr) // 就是要提交的数据了, 要将推荐频道移除
      // 截取推荐频道 pop push shift unshift
      arr.shift()
      // 发送请求
      await reqUpdateChannels(arr) */
      this.handleParams()
    },
    delChannel(id, index) {
      // console.log(id)
      // 如果删除的频道在当前激活的频道前面 让active - 1
      if (index < this.active) {
        // 通知父组件 让active - 1
        this.$emit('changeActive', this.active - 1)
      }
      this.$store.commit('channels/delChannel', id)
      this.handleParams()
    },
    // 格式化数据的方法
    async handleParams() {
      const arr = this.channels.map((item, index) => {
        return { id: item.id, seq: index }
      })
      // console.log(arr) // 就是要提交的数据了, 要将推荐频道移除
      // 截取推荐频道 pop push shift unshift
      arr.shift()
      // 发送请求
      if (!arr.length) return this.$toast('请保留推荐之外的一个频道')
      await reqUpdateChannels(arr)
    }
  }
}
</script>

<style lang="scss" scoped>
.channel{
  padding:15px;
  font-size:14px;
  ::v-deep .van-button--mini {
    height: 22px;
    min-width: 50px;
  }
  .btn {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 14px;
  }
}
.current {
  color: #e92322;
  font-weight: 700;
}
</style>
